<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <select name="" id="" class="province">
        <option value="">请选择省份</option>
    </select>
    <select name="" id="" class="city">
        <option value="">请选择城市</option>
    </select>
    <select name="" id="" class="area">
        <option value="">请选择区域</option>
        <!-- <option value=""></option> -->
    </select>
    <script>
        const province = document.querySelector('.province')
        const city = document.querySelector('.city')
        const area = document.querySelector('.area')
        var xhr = new XMLHttpRequest();
        xhr.open("get", "../day2/data/proData.json", true)
        xhr.send()
        xhr.addEventListener("readystatechange", function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                var data = JSON.parse(xhr.responseText);
                // console.log(data);
                var { "list": proList } = data
                var html = `
                    <option value="">请选择省份</option>
                `
                proList.forEach(({ city_id, name }) => html += `
                     <option value="${city_id}">${name}</option>
                    `)
                province.innerHTML = html

                province.onchange = function () {
                    var proIpt = this.value
                    var html2 = `
                <option value="">请选择城市</option>
                `
                    if (proIpt) {
                        var thisList = proList.filter(({ city_id }) => city_id == proIpt)[0]
                        var { list: cityList } = thisList
                        cityList.forEach(({ city_id, name }) => html2 += `
                        <option value="${city_id}">${name}</option>
                        `)
                        city.innerHTML = html2

                        city.onchange = function () {
                            var cityIpt = this.value
                            // console.log(proList)
                            // console.log(cityList)
                            if (cityIpt) {
                                var cityThisList = cityList.filter(({ city_id }) => city_id == cityIpt)[0]
                                // console.log(cityThisList.list)
                                var html3 = `
                                    <option value="">请选择区</option>
                                    `

                                var flag = cityThisList.list ? 1 : 0
                                console.log(flag)
                                if (flag) {
                                    var { list: areaList } = cityThisList
                                    // console.log(areaList)

                                    areaList.forEach(({ city_id, name }) => html3 += `
                                        <option value="${city_id}">${name}</option>
                                    `)
                                    area.innerHTML = html3

                                } else {
                                    area.innerHTML = `
                                    <option value="">请选择区</option>
                                    `
                                }
                            }
                        }

                    } else {
                        city.innerHTML = html2
                    }
                }

            }
        })
    </script>
</body>

</html>